<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ground Station</title>
  <style>
    /* CSS样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f0f5ff; /* 蓝白风格背景色 */
    }
    .navbar {
      background-color: #333; /* 导航栏背景色 */
      overflow: hidden;
    }
    .navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      font-size: 17px;
    }
    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    .container {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 20px;
      margin-bottom: 20px;
      background-color: #ffffff; /* 白色背景 */
    }
    .status {
      font-weight: bold;
      color: green;
    }
    .flex-container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .flex-item {
      flex: 1;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    @media (max-width: 768px) {
      .flex-container {
        flex-direction: column;
      }
    }
  .navbar h1{
    color: white;
    horiz-align: center;
    text-align: center;
  }
  </style>
</head>
<body>
<div class="navbar">
  <h1>地面站</h1>
  <a href="#" onclick="showSatelliteResources()">卫星资源状态</a>
  <a href="#" onclick="showContainerStatus()">容器运行状态</a>
  <a href="#" onclick="showLogView()">日志查看</a>
  <div id="connectionStatus" style="float: right; color: white; padding: 14px 20px;">通信链接：正常</div>
</div>

<div id="mainContent">
  <!-- 这里将会显示主界面内容 -->
</div>

<script>
  // JavaScript代码
  // 默认显示卫星资源状态
  showSatelliteResources();

  // 显示卫星资源状态
  function showSatelliteResources() {
    document.getElementById('mainContent').innerHTML = `
                <div class="container">
                    <h2>卫星资源使用状态</h2>
                    <table id="satelliteResourcesTable">
                        <thead>
                            <tr>
                                <th>节点</th>
                                <th>CPU 使用率</th>
                                <th>内存使用量</th>
                                <th>硬盘使用量</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>节点1</td>
                                <td class="cpu-usage"></td>
                                <td class="memory-usage"></td>
                                <td class="disk-usage"></td>
                            </tr>
                            <tr>
                                <td>节点2</td>
                                <td class="cpu-usage"></td>
                                <td class="memory-usage"></td>
                                <td class="disk-usage"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            `;
    // 更新卫星资源状态数据
    updateSatelliteResources();
  }

  // 更新卫星资源状态数据
  function updateSatelliteResources() {
    const jsonData = [
      {
        "id": "node1",
        "cpu_usage": 0.75,
        "memory_usage": "0.5GB",
        "disk_usage": "0.4GB"
      },
      {
        "id": "node2",
        "cpu_usage": 0.6,
        "memory_usage": "0.7GB",
        "disk_usage": "0.5GB"
      }
    ];

    jsonData.forEach(node => {
      const nodeRow = document.querySelector(`#satelliteResourcesTable tbody tr:nth-child(${jsonData.indexOf(node) + 1})`);
      nodeRow.querySelector('.cpu-usage').textContent = `${(node.cpu_usage * 100).toFixed(2)}%`;
      nodeRow.querySelector('.memory-usage').textContent = node.memory_usage;
      nodeRow.querySelector('.disk-usage').textContent = node.disk_usage;
    });

    // 以每秒一次的频率更新数据
    setInterval(() => {
      // 模拟更新数据
      jsonData.forEach(node => {
        node.cpu_usage = Math.random();
        node.memory_usage = (Math.random() * 2).toFixed(1) + "GB"; // Simulate memory usage between 0GB to 2GB
        node.disk_usage = (Math.random() * 2).toFixed(1) + "GB"; // Simulate disk usage between 0GB to 2GB
      });

      jsonData.forEach(node => {
        const nodeRow = document.querySelector(`#satelliteResourcesTable tbody tr:nth-child(${jsonData.indexOf(node) + 1})`);
        nodeRow.querySelector('.cpu-usage').textContent = `${(node.cpu_usage * 100).toFixed(2)}%`;
        nodeRow.querySelector('.memory-usage').textContent = node.memory_usage;
        nodeRow.querySelector('.disk-usage').textContent = node.disk_usage;
      });
    }, 1000);
  }

  // 显示容器运行状态
  function showContainerStatus() {
    document.getElementById('mainContent').innerHTML = `
                <div class="container">
                    <h2>容器运行状态</h2>
                    <table id="containerStatusTable">
                        <thead>
                            <tr>
                                <th>容器ID</th>
                                <th>启停状态</th>
                                <th>对外端口</th>
                                <th>基础镜像</th>
                                <th>部署位置</th>
                                <th>资源开销</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
    </tbody>
    </table>
    </div>
    `;
        // 更新容器状态数据
        updateContainerStatus();
    }

    // 更新容器状态数据
    function updateContainerStatus() {
        const jsonData = [
            {
                "id": "3e3befb7691",
                "name": "rabbitmq",
                "status": "running",
                "cpu_usage_percentage": 0.12349755017191463,
                "memory_usage": "0.5GB",
                "memory_limit": "0.5GB",
                "base_image": "rabbitmq:7.0",
                "location": "node1",
                "ports": {
                    "15671/tcp": [
                        { "HostIp": "0.0.0.0", "HostPort": "15671" },
                        { "HostIp": "::", "HostPort": "15671" }
                    ],
                    "5671/tcp": [
                        { "HostIp": "0.0.0.0", "HostPort": "5671" },
                        { "HostIp": "::", "HostPort": "5671" }
                    ]
                }
            }
        ];

        jsonData.forEach(container => {
            const containerRow = document.createElement('tr');

            const idCell = document.createElement('td');
            idCell.textContent = container.id;
            containerRow.appendChild(idCell);

            const statusCell = document.createElement('td');
            statusCell.textContent = container.status;
            containerRow.appendChild(statusCell);

            const portsCell = document.createElement('td');
            let portsText = '';
            for (const port in container.ports) {
                if (container.ports[port] !== null) {
                    portsText += `${port} (${container.ports[port].length} binding(s)), `;
                } else {
                    portsText += `${port} (Not bound), `;
                }
            }
            portsText = portsText.slice(0, -2); // Remove the trailing comma and space
            portsCell.textContent = portsText;
            containerRow.appendChild(portsCell);

            const imageCell = document.createElement('td');
            imageCell.textContent = container.base_image;
            containerRow.appendChild(imageCell);

            const locationCell = document.createElement('td');
            locationCell.textContent = container.location;
            containerRow.appendChild(locationCell);

            const resourceCell = document.createElement('td');
            resourceCell.textContent = `${container.cpu_usage_percentage.toFixed(2)}%, ${container.memory_usage} / ${container.memory_limit}`;
    containerRow.appendChild(resourceCell);

    const actionCell = document.createElement('td');
    actionCell.innerHTML = `<button onclick="stopContainer('${container.id}')">停止</button>`;
    containerRow.appendChild(actionCell);

    document.querySelector('#containerStatusTable tbody').appendChild(containerRow);
    });

  // 模拟每秒更新数据
  setInterval(() => {
    // 模拟更新数据
    jsonData.forEach(container => {
      container.status = Math.random() > 0.5 ? 'running' : 'stopped'; // 随机更新状态
      container.cpu_usage_percentage = Math.random();
      container.memory_usage = (Math.random() * 2).toFixed(1) + "GB"; // 模拟内存使用量
    });

    jsonData.forEach(container => {
      const containerRow = document.querySelector(`#containerStatusTable tbody tr:nth-child(${jsonData.indexOf(container) + 1})`);
      containerRow.querySelector('td:nth-child(2)').textContent = container.status; // 更新状态单元格
      containerRow.querySelector('td:nth-child(6)').textContent = `${container.cpu_usage_percentage.toFixed(2)}%, ${container.memory_usage} / ${container.memory_limit}`; // 更新资源开销单元格
    });
  }, 1000);
  }

  // 停止容器
  function stopContainer(containerId) {
    // 在实际应用中，应该发送请求来停止容器，这里仅为演示
    alert(`停止容器 ${containerId}`);
  }

  // 显示日志查看
  function showLogView() {
    document.getElementById('mainContent').innerHTML = `
            <div class="container">
                <h2>日志查看</h2>
                <div id="logContent"></div>
            </div>
        `;

    // 模拟生成日志数据
    generateLogData();
  }


  // 更新通信链接状态
  function updateConnectionStatus() {
    const status = ['正常', '警告', '断开'][Math.floor(Math.random() * 3)];
    document.getElementById('connectionStatus').textContent = `通信链接：${status}`;
    document.getElementById('connectionStatus').style.color = status === '正常' ? 'green' : status === '警告' ? 'orange' : 'red';
  }

  // 模拟生成日志数据
  function generateLogData() {
    const logContent = document.getElementById('logContent');
    const fakeLogs = [
      { time: '08:00', message: '系统启动，开始接收卫星信号。' },
      { time: '09:00', message: '系统自检完成，所有模块运行正常。' },
      { time: '10:00', message: '成功同步卫星数据。' },
      { time: '11:00', message: '系统维护，更新软件包。' },
      { time: '12:00', message: '维护完成，系统性能优化。' },
      { time: '13:00', message: '检测到异常信号，已自动校正。' },
      { time: '14:00', message: '卫星通信链路稳定性检测。' },
      { time: '15:00', message: '地面站与卫星通信链路正常。' },
      { time: '16:00', message: '开始执行数据备份任务。' },
      { time: '17:00', message: '数据备份成功完成。' },
      { time: '18:00', message: '系统准备切换到夜间监控模式。' }
    ];

    fakeLogs.forEach(log => {
      const logLine = document.createElement('div');
      logLine.textContent = `[${log.time}] ${log.message}`;
      logContent.appendChild(logLine); // 使用appendChild而不是prepend
    });
  }
  // 在页面加载时更新通信链接状态
  updateConnectionStatus();

</script>
</body>
</html>